<template>
  <div class="admin-dashboard">
    <div class="header">
      <h1 class="text-2xl font-bold text-gray-900">管理员控制台</h1>
      <div class="actions">
        <button class="btn btn-primary" @click="refreshUserInfo">
          <i class="fa fa-refresh mr-2"></i>刷新信息
        </button>
        <button class="btn btn-danger ml-2" @click="handleLogout">
          <i class="fa fa-sign-out mr-2"></i>退出登录
        </button>
      </div>
    </div>
    
    <div v-if="loading" class="loading">
      <div class="flex justify-center items-center py-10">
        <i class="fa fa-spinner fa-spin text-3xl text-primary"></i>
        <span class="ml-2 text-lg">加载中...</span>
      </div>
    </div>
    
    <div v-else-if="userInfo" class="content">
      <!-- 用户基本信息卡片 -->
      <div class="user-info-card bg-white rounded-lg shadow p-6 mb-6">
        <div class="flex items-center mb-4">
          <div class="user-avatar w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mr-4">
            <i class="fa fa-user-circle text-3xl text-primary"></i>
          </div>
          <div>
            <h2 class="text-xl font-bold text-gray-900">{{ userInfo.name }}</h2>
            <p class="text-gray-600">{{ userInfo.email }}</p>
            <div class="mt-1">
              <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
                {{ userInfo.status === 'active' ? '活跃' : '禁用' }}
              </span>
              <span v-if="userInfo.role" class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full ml-2">
                {{ userInfo.role === 'admin' ? '超级管理员' : userInfo.role }}
              </span>
            </div>
          </div>
        </div>
        
        <div class="user-details grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="detail-item">
            <span class="text-gray-500">用户ID：</span>
            <span class="font-medium">{{ userInfo.id }}</span>
          </div>
          <div class="detail-item">
            <span class="text-gray-500">角色ID：</span>
            <span class="font-medium">{{ userInfo.roleId }}</span>
          </div>
          <div class="detail-item">
            <span class="text-gray-500">创建时间：</span>
            <span class="font-medium">{{ formatDate(userInfo.createdAt) }}</span>
          </div>
          <div class="detail-item">
            <span class="text-gray-500">最后更新：</span>
            <span class="font-medium">{{ formatDate(userInfo.updatedAt) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 权限和角色信息 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 角色信息卡片 -->
        <div class="roles-card bg-white rounded-lg shadow p-6">
          <h3 class="text-lg font-bold text-gray-900 mb-4">
            <i class="fa fa-id-badge mr-2 text-primary"></i>角色信息
          </h3>
          <div v-if="userInfo.roles && userInfo.roles.length > 0">
            <ul class="role-list space-y-2">
              <li v-for="role in userInfo.roles" :key="role" class="flex items-center">
                <i class="fa fa-check-circle text-green-500 mr-2"></i>
                <span>{{ role === 'admin' ? '超级管理员' : role }}</span>
              </li>
            </ul>
          </div>
          <div v-else class="text-gray-500">暂无角色信息</div>
        </div>
        
        <!-- 权限信息卡片 -->
        <div class="permissions-card bg-white rounded-lg shadow p-6">
          <h3 class="text-lg font-bold text-gray-900 mb-4">
            <i class="fa fa-key mr-2 text-primary"></i>权限信息
          </h3>
          <div v-if="userInfo.permissions && userInfo.permissions.length > 0">
            <div v-if="userInfo.permissions.includes('all')" class="text-green-600 font-medium">
              <i class="fa fa-check-circle text-green-500 mr-2"></i>拥有所有权限
            </div>
            <ul v-else class="permission-list space-y-2">
              <li v-for="permission in userInfo.permissions" :key="permission" class="flex items-center">
                <i class="fa fa-check-circle text-green-500 mr-2"></i>
                <span>{{ permission }}</span>
              </li>
            </ul>
          </div>
          <div v-else class="text-gray-500">暂无权限信息</div>
        </div>
      </div>
      
      <!-- 权限验证示例 -->
      <div class="permissions-demo bg-white rounded-lg shadow p-6 mt-6">
        <h3 class="text-lg font-bold text-gray-900 mb-4">
          <i class="fa fa-shield mr-2 text-primary"></i>权限验证示例
        </h3>
        <div class="demo-items space-y-4">
          <div>
            <span class="font-medium mr-2">管理员可见：</span>
            <span v-admin class="text-green-600">
              <i class="fa fa-check-circle"></i> 仅管理员可见内容
            </span>
            <span v-if="!$auth.isAdmin()" class="text-gray-400">
              <i class="fa fa-lock"></i> 内容已隐藏
            </span>
          </div>
          <div>
            <span class="font-medium mr-2">有权限 "all" 可见：</span>
            <span v-permission="'all'" class="text-green-600">
              <i class="fa fa-check-circle"></i> 仅拥有 'all' 权限的用户可见
            </span>
            <span v-if="!$auth.hasPermission('all')" class="text-gray-400">
              <i class="fa fa-lock"></i> 内容已隐藏
            </span>
          </div>
          <div>
            <span class="font-medium mr-2">有角色 "admin" 可见：</span>
            <span v-role="'admin'" class="text-green-600">
              <i class="fa fa-check-circle"></i> 仅拥有 'admin' 角色的用户可见
            </span>
            <span v-if="!$auth.hasRole('admin')" class="text-gray-400">
              <i class="fa fa-lock"></i> 内容已隐藏
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <div v-else class="no-user-info">
      <div class="flex flex-col items-center justify-center py-10 text-gray-500">
        <i class="fa fa-user-o text-5xl mb-4"></i>
        <p class="text-lg">未登录或用户信息加载失败</p>
        <button class="mt-4 btn btn-primary" @click="redirectToLogin">
          前往登录
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getUserInfo as getAuthUserInfo, logout, refreshUserInfo as refreshAuthUserInfo } from '@/utils/auth'
import { formatDate } from '@/utils/date'
import { showToast } from '@/utils/toast'

const router = useRouter()
const userInfo = ref(null)
const loading = ref(false)

// 获取用户信息
const loadUserInfo = async () => {
  loading.value = true
  try {
    const info = getAuthUserInfo()
    if (info) {
      userInfo.value = info
    } else {
      // 如果本地没有用户信息，尝试从API获取
      await refreshUserInfo()
    }
  } catch (error) {
    console.error('加载用户信息失败:', error)
    showToast('加载用户信息失败', 'error')
  } finally {
    loading.value = false
  }
}

// 刷新用户信息
const refreshUserInfo = async () => {
  loading.value = true
  try {
    await refreshAuthUserInfo()
    userInfo.value = getAuthUserInfo()
    showToast('用户信息已刷新', 'success')
  } catch (error) {
    console.error('刷新用户信息失败:', error)
    showToast('刷新用户信息失败', 'error')
  } finally {
    loading.value = false
  }
}

// 处理退出登录
const handleLogout = () => {
  logout()
  showToast('已成功退出登录', 'success')
  router.push('/login')
}

// 重定向到登录页
const redirectToLogin = () => {
  router.push('/login')
}

// 组件挂载时加载用户信息
onMounted(() => {
  loadUserInfo()
})
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.actions {
  display: flex;
  gap: 10px;
}

.content {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-info-card, .roles-card, .permissions-card, .permissions-demo {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-info-card:hover, .roles-card:hover, .permissions-card:hover, .permissions-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.user-details {
  margin-top: 20px;
}

.detail-item {
  padding: 5px 0;
}

.role-list, .permission-list {
  max-height: 200px;
  overflow-y: auto;
}

.demo-items {
  padding: 10px 0;
}

/* 自定义滚动条样式 */
.role-list::-webkit-scrollbar, .permission-list::-webkit-scrollbar {
  width: 6px;
}

.role-list::-webkit-scrollbar-track, .permission-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.role-list::-webkit-scrollbar-thumb, .permission-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.role-list::-webkit-scrollbar-thumb:hover, .permission-list::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>